<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>榜单</title>
    <link type="text/css" rel="stylesheet" href="/static/css/style.css"/>
    <script src="/static/script/jquery-1.7.2.js"></script>
    <script>
        $(function (){
            var s = "全部"
            var showingFilms = "正在热映"
            $("#film_a").attr("href","/showFilms?filmState="+showingFilms+"&filmType="+s+"&zone="+s)

            //获取榜单条件
            var listCondition = "{{.ListCondition}}"
            //给筛选的按钮绑定单击事件
            $(".sub").click(function (){
                //获取电影状态
                listCondition = $(this).val();
                location = "/filmList?listCondition="+listCondition;
            });

            var sub = document.getElementsByClassName("sub")
            for(var i=0;i<sub.length;i++) {
                var state = sub[i].value
                if(state === listCondition){
                    sub[i].setAttribute("style","background-color: #b8dee7;width: 150px;height: 60px;margin: 10px;color: brown;font-size: 20px;font-family: '宋体';");
                } else {
                    sub[i].onmouseover = function () {
                        this.setAttribute("style","background-color: #b8dee7;width: 150px;height: 60px;margin: 10px;color: brown;font-size: 20px;font-family: '宋体';");
                    }
                    sub[i].onmouseout = function () {
                        this.setAttribute("style","background-color: cadetblue;width: 150px;height: 60px;margin: 10px;color: brown;font-size: 20px;font-family: '宋体';");
                    }
                }
            }

        });
    </script>
</head>
<body>
<!--第一行-->
<div id="header">
    <table>
        <tr>
            <td>
                <span><img src="/static/img/logo.png" style="float: left;border-radius: 52px"></span>
                <span id="index_logo"><a href="/" style="color:red;margin-top: 10px;float: left;vertical-align: middle;">猫眼电影</a></span>
            </td>

            <td><a href="/main">首页</a></td>
            <td><a  id="film_a">电影</a></td>
            <td><a href="/selectFilm">影院</a></td>
            <td style="background-color: cadetblue"><a href="/filmList">榜单</a></td>
            <td>
                <form action="/selectFilm" method="post">
                    <input class="search" type="search" placeholder="找影视剧" autocomplete="off" name="filmName"><input class="submit" type="submit" value="搜索">
                </form>
            </td>
            <td><a href="/login">
                {{if .IsLogin}}
                <img src="{{.User.ImgPath}}" style="width: 50px;border-radius: 50px;border: 2px solid darkblue">
                {{else}}
                <img src="/static/img/0.png" style="width: 50px;border-radius: 50px;border: 2px solid darkblue">
                {{end}}
            </a></td>
        </tr>
    </table>
</div>
<!--第二行-->
<div id="second"><input type="button" value="票房榜单" class="sub" style="background-color: cadetblue;width: 150px;height: 60px;margin: 10px;color: brown;font-size: 20px;font-family: '宋体';">
    <input type="button" value="销量榜单" class="sub" style="background-color: cadetblue;width: 150px;height: 60px;margin: 10px;color: brown;font-size: 20px;font-family: '宋体';">
</div>
<!--第四行-->
<div style="width: 1000px;margin: auto;padding: 20px;text-align: center">
    <table style="width: 20%;float: left">
        <tr>
            <td style="height: 300px;"><div style="font-family: '华文彩云';padding:10px;padding-left:18px;width: 20px;margin: auto;font-size: 20px;background-color: red;color: white">1</div></td>
        </tr>
        <tr>
            <td style="height: 300px;"><div style="font-family: '华文彩云';padding:10px;padding-left:18px;width: 20px;margin: auto;font-size: 20px;background-color: orange;color: white">2</div></td>
        </tr>
        <tr>
            <td style="height: 300px;"><div style="font-family: '华文彩云';padding:10px;padding-left:18px;width: 20px;margin: auto;font-size: 20px;background-color: orange;color: white">3</div></td>
        </tr>
        <tr>
            <td style="height: 300px;"><div style="font-family: '华文彩云';padding:10px;padding-left:18px;width: 20px;margin: auto;font-size: 20px;background-color: gray;color: white">4</div></td>
        </tr>
        <tr>
            <td style="height: 300px;"><div style="font-family: '华文彩云';padding:10px;padding-left:18px;width: 20px;margin: auto;font-size: 20px;background-color: gray;color: white">5</div></td>
        </tr>
        <tr>
            <td style="height: 300px;"><div style="font-family: '华文彩云';padding:10px;padding-left:18px;width: 20px;margin: auto;font-size: 20px;background-color: gray;color: white">6</div></td>
        </tr>
        <tr>
            <td style="height: 300px;"><div style="font-family: '华文彩云';padding:10px;padding-left:18px;width: 20px;margin: auto;font-size: 20px;background-color: gray;color: white">7</div></td>
        </tr>
        <tr>
            <td style="height: 300px;"><div style="font-family: '华文彩云';padding:10px;padding-left:18px;width: 20px;margin: auto;font-size: 20px;background-color: gray;color: white">8</div></td>
        </tr>
        <tr>
            <td style="height: 300px;"><div style="font-family: '华文彩云';padding:10px;padding-left:18px;width: 20px;margin: auto;font-size: 20px;background-color: gray;color: white">9</div></td>
        </tr>
        <tr>
            <td style="height: 300px;"><div style="font-family: '华文彩云';padding:10px;width: 25px;margin: auto;font-size: 20px;background-color: gray;color: white">10</div></td>
        </tr>
    </table>
    <table style="width: 80%;float: left">
        {{range .Films}}
            <tr>
                <td style="width: 210px"><a href="/filmPage?filmName={{.FilmName}}"><img src="{{.ImgPath}}" style="width:200px;height: 300px"></a></td>
                <td style="text-justify: auto;padding-left: 30px;border-bottom: 1px gray solid;">
                    <div style="font-size: 30px">{{.FilmName}}</div><br/>
                    <div>电影时长：{{.Duration}}分钟</div>
                    <div style="color: gray">上映时间：{{.ScreenDate}}</div>
                </td>
            </tr>
        {{end}}
    </table>
</div>
</body>
</html>